<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/index.css"/>
		<link rel="stylesheet" href="https://at.alicdn.com/t/font_234130_nem7eskcrkpdgqfr.css">
	</head>
	<body>
		<main style="width: 350px;height:410px;overflow: hidden;margin: 0 auto">
			<div class="index_frame_leftTop" style="transform: scale(0.65);top:-60px;left:-50px;">
				<div id='schedule-boxS'></div>
				<div class="index_liTLeft">
					<div class="index_liTline"></div>
				</div>
				<div class="index_liTRight">
					<div class="index_liTline"></div>
				</div>
			</div>
			<div class="index_frame_leftBottom"style="transform: scale(0.65);top:-175px;left:-50px;z-index: -1;">
				<div class="index_liBLeft"></div>
				<div class="index_liBRight"></div>
				<div class="index_frame_leftBottom_Top clearfix">
					<div>
						<div id="attendance1" style="width: 100%;height: 145px;"></div>
						<span>出勤情况</span>
					</div>
					<div>
						<div id="attendance2" style="width: 100%;height: 145px;"></div>
						<span>早退/迟到</span>
					</div>
					<div>
						<div id="attendance3" style="width: 100%;height: 145px;"></div>
						<span>缺勤</span>
					</div>
					<div>
						<div id="attendance4" style="width: 100%;height: 145px;"></div>
						<span>旷工</span>
					</div>
				</div>
				<div class="index_frame_leftBottom_bottom clearfix">
					<div>
						<span>1</span>
						<span>病假</span>
					</div>
					<div>
						<span>0</span>
						<span>事假</span>
					</div>
					<div>
						<span>2</span>
						<span>年假</span>
					</div>
					<div>
						<span>3</span>
						<span>调休</span>
					</div>
					<div>
						<span>0</span>
						<span>婚/丧假</span>
					</div>
					<div>
						<span>0</span>
						<span>产假/护理假</span>
					</div>
				</div>
			</div>
		</main>
		
		<script src="js/index.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/schedule.js" type="text/javascript" charset="utf-8"></script>
		<script src="https://cdn.bootcss.com/echarts/4.2.0-rc.2/echarts.simple.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/jquery-3.4.1.js"></script>
		<script type="text/javascript">
			var mySchedule = new Schedule({
				el: '#schedule-boxS',
				//异常考勤
				qqDate : [
					{time:"2018-11-02",Morning:"",Afternoon:"",type:"请假"},
					{time:"2018-11-09",Morning:"",Afternoon:"16:01",type:"迟到"},
					{time:"2018-11-14",Morning:"",Afternoon:"",type:"缺勤"},
					{time:"2018-11-16",Morning:"08:15",Afternoon:"",type:"早退"},
					{time:"2018-12-19",Morning:"",Afternoon:"16:01",type:"迟到"}],
				//正常考勤
				zcDate : [
							{time:"2018-11-01",Morning:"08:15",Afternoon:"16:01"},
							{time:"2018-11-05",Morning:"08:15",Afternoon:"16:01"},
							{time:"2018-11-06",Morning:"08:15",Afternoon:"16:01"},
							{time:"2018-11-07",Morning:"08:15",Afternoon:"16:01"},
							{time:"2018-11-08",Morning:"08:15",Afternoon:"16:01"},
							{time:"2018-11-12",Morning:"08:15",Afternoon:"16:01"},
							{time:"2018-11-13",Morning:"08:15",Afternoon:"16:01"},
							{time:"2018-11-15",Morning:"08:15",Afternoon:"16:01"},
							{time:"2018-11-16",Morning:"08:15",Afternoon:"16:01"},
							{time:"2018-11-15",Morning:"08:15",Afternoon:"16:01"},
							{time:"2018-11-19",Morning:"08:15",Afternoon:"16:01"},
							{time:"2018-11-20",Morning:"08:15",Afternoon:"16:01"},
							{time:"2018-11-21",Morning:"08:15",Afternoon:"16:01"},
							{time:"2018-11-22",Morning:"08:15",Afternoon:"16:01"},
							{time:"2018-11-23",Morning:"08:15",Afternoon:"16:01"},
							{time:"2018-11-26",Morning:"08:15",Afternoon:"16:01"},
							{time:"2018-11-27",Morning:"08:15",Afternoon:"16:01"},
							{time:"2018-11-28",Morning:"08:15",Afternoon:"16:01"},
							{time:"2018-11-29",Morning:"08:15",Afternoon:"16:01"},
							{time:"2018-11-30",Morning:"08:15",Afternoon:"16:01"},
							{time:"2018-12-03",Morning:"08:15",Afternoon:"16:01"},
							{time:"2018-12-04",Morning:"08:15",Afternoon:"16:03"},
							{time:"2018-12-05",Morning:"08:15",Afternoon:"16:01"},
							{time:"2018-12-06",Morning:"08:15",Afternoon:"16:01"},
							{time:"2018-12-07",Morning:"08:15",Afternoon:"16:01"},
							{time:"2018-12-10",Morning:"08:15",Afternoon:"16:01"},
							{time:"2018-12-11",Morning:"08:15",Afternoon:"16:01"},
							{time:"2018-12-12",Morning:"08:15",Afternoon:"16:01"},
							{time:"2018-12-13",Morning:"08:15",Afternoon:"16:01"},
							{time:"2018-12-14",Morning:"08:15",Afternoon:"16:01"},
							{time:"2018-12-17",Morning:"08:15",Afternoon:"16:01"},
							{time:"2018-12-18",Morning:"08:15",Afternoon:"16:01"},
							{time:"2018-12-19",Morning:"08:15",Afternoon:"16:01"},
							{time:"2018-12-20",Morning:"08:15",Afternoon:"16:01"},
							{time:"2018-12-21",Morning:"08:15",Afternoon:"16:01"},
							{time:"2018-12-24",Morning:"08:15",Afternoon:"16:01"},
							{time:"2018-12-25",Morning:"08:15",Afternoon:"16:01"},
							{time:"2018-12-26",Morning:"08:15",Afternoon:"16:01"},
							{time:"2018-12-27",Morning:"08:15",Afternoon:"16:01"},
							{time:"2018-12-28",Morning:"08:15",Afternoon:"16:01"},
							{time:"2018-12-31",Morning:"08:15",Afternoon:"16:01"},
						],
			});
			//按条件查找并统计
			// function  search (arr,key,val) {
			// 	var array=[];
			// 	$.each(arr,function(index,value){
			// 		for(var akey in value){
			// 			if (akey==key&&val==value[akey]){
			// 				array.push(value);
			// 			}
			// 		}
			// 	});
			// 	return array;
			// }
			// var arr1=search(arr,'type','大班月亮');
			// console.log(arr1)
			//在考勤数据中查询 并渲染
			// console.log(mySchedule[0]);
		function monthlyCalendar() {
				var absent=mySchedule[2]
				var oBox=document.getElementsByClassName('.schedule-bd');
				var date = new Date();
				var year =date.getFullYear();
				var	month = date.getMonth();
				var startWeek = new Date(year, month, 1).getDay();//当月第一天是周几
				var day = date.getDate();
				var n=0;
				 n=startWeek+day-1;
				var arr=[];
				var arry=arr.concat(n);
				console.log(arry);
				// alert(n);
				// var arr=new Array();
				// arr.concat(n);
				// arr=[1,2,3,4,5,6,7,8,9,10];
				// alert(arr);
				// $('.schedule-bd').children().eq(n).css('color','red');
				$('.schedule-bd').children().eq(arry[0]).children().eq(0).css('background','yellow');
			};
			monthlyCalendar()
			// ;(function () {
			// 	var now='';
			// 	var date = new Date();
			// 	var h=date.getHours();
			// 	var m=date.getMinutes();
			// 	now=h+':'+m;
			// 	var time_range = function (beginTime, endTime, nowTime) {
			// 		var strb = beginTime.split (":");
			// 		if (strb.length != 2) {
			// 			return false;
			// 		}
			//
			// 		var stre = endTime.split (":");
			// 		if (stre.length != 2) {
			// 			return false;
			// 		}
			//
			// 		var strn = nowTime.split (":");
			// 		if (stre.length != 2) {
			// 			return false;
			// 		}
			// 		var b = new Date ();
			// 		var e = new Date ();
			// 		var n = new Date ();
			//
			//
			//
			//
			// 		b.setHours (strb[0]);
			// 		b.setMinutes (strb[1]);
			// 		e.setHours (stre[0]);
			// 		e.setMinutes (stre[1]);
			// 		n.setHours (strn[0]);
			// 		n.setMinutes (strn[1]);
			// 		alert( n.getHours ());
			// 		alert(n.getMinutes ());
			//
			//
			//
			// 		if (n.getTime () - b.getTime () > 0 && n.getTime () - e.getTime () < 0) {
			// 			return true;
			// 		} else {
			// 			alert ("当前时间是：" + n.getHours () + ":" + n.getMinutes () + "，不在该时间范围内！");
			// 			return false;
			// 		}
			// 	}
			// 	// alert(now);
			// 	//
			// 	// console.log(typeof(now))
			// 	time_range ("22:30", "08:30", now);
			// })();
		</script>
	</body>

</html>
